<template>
    <!--对垒悬浮框-->
    <div class="stand-facing positionAbCenter">
                <!--<div class="stand-facing-content positionRCT">-->
        <div class="stand-facing-content" ref="statistic" v-if="interactMsg.interactOptions.length > 0">
            <div class="">
                {{interactMsg.title}}
            </div>
            <div v-if="interactMsg.templateType==1">
                <div class="stand-btns positionR" v-if="!isChoise && !interactMsg.isSelf">
                    <img class="stand-btn" :src="staticImageUrl('/images/components/light_blue_btn.png')" alt="">
                    <span class="stand-text" v-if="interactMsg.interactOptions && interactMsg.interactOptions[0] && interactMsg.interactOptions[0].content" @click="doVote(interactMsg.interactOptions[0].id)">{{interactMsg.interactOptions[0].content}}</span>
                </div>
                <div v-else class="stand-facing-button positionRLCT" >
                    <span class="stand-facing-cbutton transition03s positionAbCenter" v-if="interactMsg.interactOptions && interactMsg.interactOptions[0]" @click="showJoinList" :style="{width: btnCenterWidth ? '100%' : '0%',height: btnCenterWidth ? '100%' : '0%'}"></span>
                    {{gtTenThousand(interactMsg.interactOptions[0].selectedNum)}}人
                    <transition name="standAdd"
                                leave-active-class="animated fadeOutUp">
                        <span v-if="addIconShow" class="stand-add-one">+1</span>
                    </transition>
                </div>
            </div>
            <div v-else-if="interactMsg.templateType==0">
                <div class="stand-btns positionR" v-if="!isChoise && !interactMsg.isSelf">
                    <img class="stand-btn" :src="staticImageUrl('/images/components/deep_blue_btn.png')" alt="">
                    <span class="stand-text" @click="doVote(interactMsg.interactOptions[0].id)">{{interactMsg.interactOptions[0].content}}</span>
                </div>
                <div v-else class="stand-facing-button positionRLCT border-radius25rem">
                    <span class="stand-facing-cbutton border-radius25rem transition03s positionAbCenter" @click="showJoinList" :style="{width: btnCenterWidth ? '100%' : '0%',height: btnCenterWidth ? '100%' : '0%'}"></span>
                    {{gtTenThousand(interactMsg.interactOptions[0].selectedNum)}}人
                    <transition name="standAdd"
                                leave-active-class="animated fadeOutUp">
                        <span v-if="addIconShow" class="stand-add-one stand-blue">+1</span>
                    </transition>
                </div>
            </div>
            <div v-else-if="interactMsg.templateType==2">
                <div class="stand-btns positionR" v-if="!isChoise && !interactMsg.isSelf">
                    <img class="stand-btn" :src="staticImageUrl('/images/components/yellow_btn.png')" alt="">
                    <span class="stand-text" @click="doVote(interactMsg.interactOptions[0].id)">{{interactMsg.interactOptions[0].content}}</span>
                </div>
                <div v-else class="stand-facing-button positionRLCT">
                    <span class="stand-facing-cbutton border-radius25rem transition03s positionAbCenter" @click="showJoinList" :style="{width: btnCenterWidth ? '100%' : '0%',height: btnCenterWidth ? '100%' : '0%'}"></span>
                    {{gtTenThousand(interactMsg.interactOptions[0].selectedNum)}}人
                    <transition name="standAdd"
                                leave-active-class="animated fadeOutUp">
                        <span v-if="addIconShow" class="stand-add-one stand-yellow">+1</span>
                    </transition>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "statistic",
        props:{
            interactProp:Object
        },
        data(){
            return {
                addIconShow: false,
                isChoise: false,
                btnCenterWidth:false,//
                interactMsg: {
                    isSelf:false,/*@isSelf是否为自己发起的话题*/
                    interactId: 0,//互动id
                    title: '',//互动标题
                    templateType: 0,//对垒魔板
                    scale: 1,//缩放比例
                    axisX: '',//话题出现的x轴位置
                    axisY: '',//话题出现的x轴位置
                    interactOptions: [
                        // {
                        //     "id": 1,
                        //     "optionLevel": 1,              //-----选项级别:统计-1，对垒1-对一个选项，2-对应第二个选项，互动选项依次往下推
                        //     "content": "算我一个",          //-----选项描述
                        //     "selectedNum": 0,              //-----该选项的选择人数
                        // }
                    ],
                    interactOptionId: 0                  //-----互动选中选项id:对应interactOptions里面的id
                }
            }
        },
        mounted(){
            this.interactMsg = Object.assign({},this.interactMsg,this.interactProp)
            console.log(this.interactMsg)
            if( this.interactMsg.isSelf ){
                this.btnCenterWidth = true;
            }
            if(this.$refs.statistic){
                this.$refs.statistic.style.left = this.interactMsg.axisX + "px";
                this.$refs.statistic.style.top = this.interactMsg.axisY + "px";
            }
        },
        methods:{
            doVote(id){
                if(!this.userId){
                    this.$router.push('/to/login');
                    return;
                }
                if(this.interactProp.isSelf){
                    this.$emit('recordList',this.interactProp.interactOptions[0].id);
                    return;
                }
                this.isChoise = true;
                this.btnCenterWidth = false
                this.addIconShow = true;
                this.$emit('joinTHeme',id);
                this.interactMsg.interactOptions[0].selectedNum ++;
                setTimeout(()=>{
                    this.btnCenterWidth = true;
                },20)
                setTimeout(()=>{
                    this.addIconShow = false;
                },300);
            },
            showJoinList(){
                if(this.interactProp.isSelf){
                    this.$emit('recordList',this.interactProp.interactOptions[0].id);
                }
            }
        },
        watch:{
            interactProp(val){
                this.interactMsg = Object.assign({},this.interactMsg,val)
                if( this.interactMsg.isSelf ){
                    this.btnCenterWidth = true;
                }
                if(this.$refs.statistic){
                    this.$refs.statistic.style.left = this.interactMsg.axisX + "px";
                    this.$refs.statistic.style.top = this.interactMsg.axisY + "px";
                }
            }
        },
    }
</script>

<style scoped>
    .stand-facing{
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        top: 25%;
        bottom: auto;
    }
    .stand-facing-content{
        padding: .15rem .16rem .1rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 2.4rem;
        text-align: center;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        background-color: rgba(0,0,0,.1);
        color: #fff;
        font-size: .18rem;
        position: relative;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .stand-facing-button{
        width: 1.2rem;
        height: .4rem;
        line-height: .4rem;
        -webkit-border-radius: .05rem;
        -moz-border-radius: .05rem;
        border-radius: .05rem;
        margin-top: .1rem;
        color: #fff;
    }
    .stand-facing-cbutton{
        width: 0;
        height: 0;
        border-radius: .05rem;
        background-color: rgba(255,255,255,.4);
    }
    .border-radius25rem{
        -webkit-border-radius: .25rem;
        -moz-border-radius: .25rem;
        border-radius: .25rem;
    }
    .stand-btn{
        width: 1.2rem;
    }
    .stand-text{
        position: absolute;
        top: 48%;
        left: 50%;
        font-size: .16rem;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
    .stand-add-one{
        position: absolute;
        right: 0;
        bottom: .15rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        border: 2px solid #fff;
        background-color: #18CEF2;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: .24rem;
        line-height: .2rem;
        height: .24rem;
        font-size: .1rem;
        white-space: nowrap;
    }
    .stand-blue{
        background-color: #5181E8;
    }
    .stand-yellow{
        background-color: #FFB700  ;
    }
</style>